<template>
  <div class="m-order-item">
    <!-- 列表 -->
    <div class="lists">
      <div class="order-item">
        <table class="m-order-table clearfix">
          <tr>
            <th class="order-title" colspan="6">
              <div class="c-h-l fl">
                <div class="check-box">
                  <w-checkbox :label="`order${orderIndex}`" name="订单" v-model="order.checked" @on-change="_setStoreToAllCheck"></w-checkbox>
                </div>
                <span>订单编号：<span style="color: #2576FF">{{order.orderId}}</span></span>
                <span style="margin-left: 20px;">下单时间：{{order.addTime || '暂无'}}</span>
                <span>（{{order.orderMark == '0' ? '普通订单' : '供应链订单'}}）</span>
              </div>
              <div class="c-h-r fl">
                <span class="store-name">{{order.storeName}}</span>
              </div>
              <div class="fr" style="position: relative;">
                <w-button class="print-btn" type="option" v-if="order.orderStatus >= 30" @on-click="onPrintOrder(order.id)">打印订单</w-button>
                <div class="flag cur" v-if="order.storeSign && order.storeSign != null" @click="signStatus = true">
                  <img src="../../../assets/flag_black.png" alt="">
                </div>
              </div>
            </th>
          </tr>
        </table>
        <!-- 列表 -->
        <div class="clearfix order-list">
          <table style="width: 48%" class="fl">
            <tbody v-for="(goods, goodsIndex) in JSON.parse(order.goodsInfo || '[]')" :key="goodsIndex">
              <tr class="bor-b" v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
                <td class="clearfix goods-list" style="width: 28%">
                  <!-- 缺货标记：out-stock -->
                  <div class="fl goods-main-img">
                    <img v-lazy="goods.goods_mainphoto_path" alt="">
                  </div>
                  <div class="goods-info">
                    <p class="p-line-hide">{{goods.goods_name}}</p>
                    <!-- SKU -->
                    <div class="goods-sku txt-goods">
                      <span>颜色：{{gsp.goodsSpecContent[0]}} </span>
                      <span style="margin-left: 16px">尺码：{{gsp.goodsSpecContent[1]}}</span>
                      <br>
                      <span>商品编码：{{goods.goodsSerial}}</span>
                    </div>
                  </div>
                </td>
                <!-- 单价，数量 -->
                <td style="width: 12%;" class="goods-del">
                  <span class="txt-goods number">￥{{(gsp.goodsSinglePrice || 0) | currency}}</span>
                  <div class="number">
                    <span class="txt-goods goods-count">{{gsp.count}}</span>
                  </div>
                  <!-- SKU,已发数量 -->
                  <!-- <div class="dev-count" v-if="order.orderStatus > 30">
                    <span>已发货：2 </span>
                    <br>
                    <span>总数量：3</span>
                  </div> -->
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 状态，操作等 -->
          <table style="width: 52%" class="fr" :style="{'height': tabHeight}">
            <tbody>
              <tr>
                <!-- 购买人 -->
                <td style="width: 14%" class="buyer txt-m" rowspan="2">
                  <span>{{order.userName}}</span>
                  <br>
                  <span>{{order.mobile}}</span>
                </td>
                <!-- 交易状态 -->
                <td style="width: 14%" class="options td-top" rowspan="2">
                  <!-- 供应链金融订单 -->
                  <span class="c-main" v-if="order.orderStatus == 60">银行审核成功</span>
                  <span class="c-main" v-if="order.orderStatus == 61">银行审核失败</span>
                  <span class="c-main" v-if="order.orderStatus == 70">银行贷款成功</span>
                  <span class="c-main" v-if="order.orderStatus == 71">银行贷款失败</span>
                  <span class="c-main" v-if="order.orderStatus == 10">等待买家付款</span>
                  <span class="c-main" v-if="order.orderStatus == 13">贷款成功</span>
                  <span class="c-main" v-if="order.orderStatus == 16">货到付款</span>
                  <span class="c-main" v-if="order.orderStatus == 20 || order.refundStatus == 2">待发货</span>
                  <span class="c-main" v-if="order.orderStatus == 21 || order.refundStatus == 0 || order.orderStatus == 22 || order.refundStatus == 1">退款中</span>
                  <span class="c-main" v-if="order.orderStatus == 25 || order.refundStatus == 2">退款成功</span>
                  <span class="c-main" v-if="order.refundStatus == 3">退款失败</span>
                  <span class="c-main" v-if="order.orderStatus == 23">农商行部分退款中</span>
                  <span class="c-main" v-if="order.orderStatus == 30">待收货</span>
                  <span class="c-main" v-if="order.orderStatus == 40">待评价</span>
                  <span class="c-main" v-if="order.orderStatus == 41">退货申请</span>
                  <span class="c-main" v-if="order.orderStatus == 42">退货审核中</span>
                  <span class="c-main" v-if="order.orderStatus == 45">退货成功</span>
                  <span class="c-main" v-if="order.orderStatus == 46">退款及退货退款</span>
                  <span class="c-main" v-if="order.orderStatus == 50">交易成功</span>
                  <span class="c-main" v-if="order.orderStatus == 65">系统自动好评</span>
                  <br>
                  <span class="det cur" @click="onJumpDetail(order.id, order.reId)">详情</span>
                  <br>
                  <div>
                    <!-- <button class="btn-option primary" v-if="order.orderStatus == 21 && order.refundStatus == 0 && options" @click="refundModal = true">审核</button> -->
                    <button class="btn-option main" v-if="order.orderStatus == 20 && options" @click="onDeliveryGoods(order)">发货</button>
                  </div>
                  <span class="txt-m" v-if="order.orderStatus == 0">关闭交易</span>
                </td>
                <!-- 实收款 -->
                <td style="width: 14%" class="goods-amount td-top operate" rowspan="2" :class="{ remind: order.remindDeliver == 1 }">
                  <span class="amount">¥{{order.totalPrice  | currency}}</span>
                  <br>
                  <span style="color: #999">（含运费：¥{{ (order.shipPrice || 0) | currency}}）</span>
                  <br>
                  <span>{{order.consignor | consignor}}</span>
                </td>
                <!-- 评价 -->
                <td style="width: 14%" class="sale-evaluate txt-m td-top" rowspan="2" v-if="!showTd">
                  <p class="p-line-hide">{{order.userEvaInfo}}</p>
                </td>
              </tr>
            </tbody>
          </table>

        </div>
      </div>

    </div>

    <!-- 查看标记弹出框 -->
    <w-panel-fixed-wrap v-model="signStatus" title="标记备注" :show-btns="showBtnsSign" :panel-title="panelTitleSign" :show-close="showCloseSign">
      <div class="sign-panel">
        <span style="vertical-align: top">标记备注：</span>
        <div class="remark">
          {{order.storeSignInfo}}
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 退款审核 -->
    <w-panel-fixed-wrap v-model="refundModal" title="退款审核" :width="`500px`" :confirm-text="`提交`" @on-confirm="onRefundReview">
      <div class="review-refund">
        <div>
          <span class="refund-title">订单金额：</span><span>{{order.totalPrice | currency}}元</span>
        </div>
        <div>
          <span class="refund-title">审核结果：</span>
          <w-radio :label="1" name="review" v-model="reviewParams.status">通过</w-radio>
          <w-radio :label="2" name="review" v-model="reviewParams.status">拒绝</w-radio>
        </div>
        <div>
          <span class="refund-title">订单编号：</span>
          <div class="refund-input">
            <w-input :disabled="true" v-model="order.orderId"></w-input>
          </div>
        </div>
        <div v-if="reviewParams.status == 2">
          <span class="refund-title">原因：</span>
          <div class="refund-input">
            <textarea placeholder="请填写原因" v-model="reviewParams.auditFailReason"></textarea>
          </div>
        </div>
      </div>
    </w-panel-fixed-wrap>

    <!-- 确认发货 -->
    <!-- <w-panel-validate :panel-title="panelTitleDelivery" title="确认发货" v-model="deliveryPanel" :confirm-text="`提交`" @on-confirm="onConfirmDelivery" @on-cancel="_cancelDev">
      <div class="m-confirm-delivery">
        <div class="delivery">
          <span class="title">订单编号</span>
          <div class="info">
            <w-input :validate="false" :disabled="disabledDev" v-model="orderInfo.orderId"></w-input>
          </div>
        </div>
        <div class="delivery" v-if="deliveryParams.transport == '物流'">
          <span class="title">物流单号</span>
          <div class="info">
            <w-input holder="请输入" rule="isEmpty|isNumEn" error="请输入物流单号|请输入字母，数字或其组合" v-model="deliveryParams.shipCode"></w-input>
          </div>
        </div>
        <div class="delivery">
          <span class="title">物流模式</span>
          <div class="info">
            <w-select :options="deliveryModal" :defaultSe="!deliveryPanel" v-model="deliveryParams.transport"></w-select>
          </div>
        </div>
        <div class="delivery" v-if="deliveryParams.transport == '物流'">
          <span class="title">物流名称</span>
          <div class="info">
            <w-input holder="请输入"rule="isEmpty" error="请输入物流名称" v-model="deliveryParams.orderExpressName"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate> -->
    <!-- 部分发货 -->
    <w-panel-validate :panel-title="panelTitleDelivery" title="确认发货" v-model="deliveryPanel" :width="`1060px`" :height="`540px`" :confirm-text="`确定`" @on-confirm="onConfirmDelivery" @on-cancel="_cancelDev">
      <div class="m-devliver-pannel">
        <div style="margin-bottom: 10px;">订单编号：{{orderInfo.orderId}}</div>
        <div>
          <w-table :columns="deliveryColumns"></w-table>
          <div class="p-order-list">
            <table v-for="(goods, index) in goodsInfoList" :key="index">
              <tr v-for="(gsp, gspIndex) in goods.goodsGsp" :key="gspIndex">
                <td>
                  <div class="goods-info clearfix">
                    <div class="goods-img fl">
                      <img v-lazy="goods.goods_mainphoto_path" alt="">
                    </div>
                    <div class="goods-name">
                      <p>{{goods.goods_name}} {{goods.goodsSerial}}</p>
                      <div class="goods-sku txt-goods">
                        <span>颜色：{{gsp.goodsSpecContent[0]}} </span>
                        <span style="margin-left: 16px">尺码：{{gsp.goodsSpecContent[1]}}</span>
                      </div>
                    </div>
                  </div>
                </td>
                <!-- 单价 -->
                <td>
                  <span style="font-size: 14px;">¥{{gsp.goodsSinglePrice | currency}}</span>
                </td>
                <!-- 总件数 -->
                <td>
                  <div class="input-count">{{gsp.count || 0}}件</div>
                </td>
                <!-- 本次发货件数 -->
                <td>
                  <div class="input-count" style="display: inline-block;margin-right: 5px">
                    <w-input holder="请输入" rule="onlyIntNo0" error="请输入>0的数值" 
                      v-model="gsp.deliveryCount" 
                      :disabled="gsp.disabledDelivery"
                      @on-blur="_validateCount(gsp.deliveryCount, gspIndex)"></w-input>
                  </div>件
                </td>
                <!-- 剩余件数 -->
                <td>
                  <span class="input-count">0件</span>
                </td>
                <!-- 备注 -->
                <td>
                  <div style="width: 80%; margin: 0 auto;">
                    <w-input rule="isName" error="不包含特殊字符" v-model="gsp.note" :validate="false" :disabled="gsp.disabledDelivery"></w-input>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div class="m-confirm-delivery dev-info">
          <div class="delivery">
            <span class="title">物流模式</span>
            <div class="info">
              <w-select :options="deliveryModal" :defaultSe="!deliveryPanel" v-model="deliveryType"></w-select>
            </div>
          </div>
          <div class="delivery" v-if="deliveryType == '1'">
            <span class="title">物流名称</span>
            <div class="info">
              <w-input holder="请输入" rule="isName" error="不包含特殊字符" :validate="false" v-model="business"></w-input>
            </div>
          </div>
          <div class="delivery" v-if="deliveryType == '1'">
            <span class="title">物流单号</span>
            <div class="info">
              <w-input holder="请输入" rule="isEmpty|isNumEn" error="请输入物流单号|请输入字母，数字或其组合" v-model="orderNo"></w-input>
            </div>
          </div>
        </div>
      </div>
    </w-panel-validate>

  </div>
</template>

<script>
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  props: {
    // 判断是不是发货列表
    showTd: {
      type: Boolean,
      default: false
    },
    orderIndex: [Number, String],
    all: [Boolean], // 是否全选
    orderList: [Array],
    order: [Object, Array] // 订单中商品列表
  },
  data() {
    return {
      // 部分发货
      deliveryColumns: [
        {title: '商品', width: '26%'},
        {title: '单价', width: '10%'},
        {title: '总数量', width: '12%'},
        {title: '本次发货', width: '12%'},
        {title: '剩余数量', width: '10%'},
        {title: '发货备注', width: '22%'}
      ],
      // 物流模式
      deliveryModal: [
        {label: '物流', value: '1'},
        {label: '自提', value: '0'}
      ],
      disabledDev: true, // 禁止输入
      panelTitleDelivery: true,
      deliveryPanel: false, // 发货
      showCloseSign: true,
      panelTitleSign: true,
      showBtnsSign: false,
      refundModal: false,
      signStatus: false, // 标记弹出框
      allChecked: this.all,
      orderInfo: {},
      // 部分发货参数
      deliveryParams: {
        accessToken: '',
        ofId: '',
        delivery: []
      },
      // 物流
      orderNo: '',
      deliveryType: '',
      business: '', // 物流名称
      reviewParams: {
        accessToken: '',
        ofId: '',
        status: 1,
        auditFailReason: '',
        type: 5,
        reId: ''
      }
    }
  },
  computed: {
    ...mapGetters(['token']),
    // 判断来源，若是拼单主订单列表，则不展示操作按钮
    options() {
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        return false
      }
      return true
    },
    // 计算每个订单的不同商品sku的总数
    skuLen() {
      let len = 0
      const gList = JSON.parse(this.order.goodsInfo || '[]')
      if (gList && gList.length) {
        gList.forEach(goods => {
          len += goods.goodsGsp.length
        })
        return len
      }
    },
    // 计算当前的订单列表高度
    tabHeight() {
      return `${this.skuLen * 112}` + 'px'
    },
    // 设置发货所需参数
    goodsInfoList() {
      const gList = JSON.parse(this.order.goodsInfo || '[]')
      if (gList && gList.length) {
        gList.forEach(goods => {
          goods.goodsGsp.forEach(gsp => {
            this.$set(gsp, 'deliveryCount', '')
            this.$set(gsp, 'note', '')
            this.$set(gsp, 'disabledDelivery', false) // 是否可以发货，默认可以
          })
        })
        return gList
      }
      return []
    }
  },
  methods: {
    /**
     * 校验发货量与可发货的数量
     * @param count 发货量
     * @param actcount 可发货量
     */
    _validateCount(count, curIndex) {
      if (!count) return
      this.goodsInfoList.forEach(goods => {
        goods.goodsGsp.forEach((gsp, index) => {
          if (curIndex == index) {
            if (Number(count) > Number(gsp.count)) {
              this.$toast(`超出可发货量，最多发货${gsp.count}件`)
              gsp.deliveryCount = gsp.count
            }
          }
        })
      })
    },
    /**
     * 发货弹框
     */
    onDeliveryGoods(orderInfo) {
      this.deliveryPanel = true
      this.orderInfo = orderInfo
      this.deliveryParams.ofId = orderInfo.id
      this.goodsInfoList.forEach(goods => {
        goods.goodsGsp.forEach(gsp => {
          // 当已发货量>=总数量，则不可再次发货
          if (Number(gsp.actCount) >= Number(gsp.count) || gsp.refundStatus == '0' || gsp.refundStatus == '1' || gsp.refundStatus == '2') {
            gsp.disabledDelivery = true
          } else {
            gsp.disabledDelivery = false
          }
        })
      })
    },
    /**
     * 确认发货操作
     */
    onConfirmDelivery() {
      let _this = this
      let count = 0
      if (this.deliveryType != '0' && this.deliveryType != '1') {
        this.$toast('请选择物流模式')
        return
      }
      // 多个sku，必须有一个sku的发货量>0
      this.goodsInfoList.forEach(goods => {
        goods.goodsGsp.forEach(gsp => {
          count += Number(gsp.deliveryCount)
          if (!gsp.deliveryCount) return
          this.deliveryParams.delivery.push({
            'goodsCartId': gsp.goodsCartId,
            'deliveryCount': Number(gsp.deliveryCount),
            'orderNo': this.orderNo,
            'deliveryType': Number(this.deliveryType),
            'business': this.business,
            'note': gsp.note,
            'status': 0
          })
        })
      })
      if (!count) {
        this.$toast('必须有一个SKU的发货量>0')
        return
      }
      if (this.deliveryType == '1' && !this.business) {
        this.$toast('选择“物流”时，请输入物流名称')
        return
      }
      // 若有sku未发货，则该sku的清空物流信息
      this.deliveryParams.delivery.forEach(v => {
        if (!v.deliveryCount) {
          v.orderNo = ''
          v.business = ''
          v.deliveryType = ''
        }
      })
      this.deliveryParams.accessToken = this.token
      this.deliveryParams.threeMenuCode = this.$route.query.three || ''
      // 自提
      if (this.deliveryType == '0') {
        this.orderNo = null
        this.business = null
      }
      apiOrderMange.apiDeliveryGoods(this.deliveryParams).then(data => {
        _this.$toast('发货成功', () => {
          // 清空发货信息
          _this.deliveryParams.delivery = []
          _this.orderNo = ''
          _this.business = ''
          _this.deliveryType = ''
          _this.$emit('on-refresh')
          _this.deliveryPanel = false
        })
      })
    },
    /**
     * 清空发货弹框
     */
    _cancelDev() {
      this.orderNo = ''
      this.deliveryType = ''
      this.business = ''
      this.deliveryParams.delivery = []
    },
    /**
     * 打印订单
     */
    onPrintOrder(orderId) {
      window.open(`../order/print/${orderId}`)
    },
    /**
     * 退款审核
     */
    onRefundReview() {
      this.reviewParams.ofId = this.order.id
      this.reviewParams.accessToken = this.token
      this.reviewParams.reId = this.order.reId
      if (this.reviewParams.status == 2 && this.reviewParams.auditFailReason == '') {
        this.$toast('请填写审核拒绝原因')
        return
      }
      apiOrderMange.apiDeliveryGoodsFar(this.reviewParams).then(data => {
        const tip = this.reviewParams.status == 2 ? '已拒绝退款' : '退款中'
        this.$toast(tip, () => {
          this.refundModal = false
          this.$emit('on-refresh') // 通知父组件，重新调取接口
        })
      })
    },
    // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
    _setStoreToAllCheck() {
      const orderList = this.orderList
      let aStore = orderList.filter(item => {
        return item.checked === true
      })
      if (aStore.length === orderList.length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
      this.$emit('on-checked', this.allChecked)
    },
    /**
     * 查看订单详情
     */
    onJumpDetail(orderId, reId) {
      let reid
      if (reId) {
        reid = reId
      } else {
        reid = ''
      }
      if (this.$route.query.origin && this.$route.query.origin == 'fight') {
        this.$router.push(`../order/cODetail/${orderId}?origin=fight&reid=${reid}`)
        return
      }
      this.$router.push(`../order/cODetail/${orderId}?reid=${reid}`)
    }
  }
}
</script>

<style lang="scss">
.m-confirm-delivery {
  .w-input .error-tip {
    left: 0
  }
  .w-input, .select-container {
    width: 100%;
  }
}
.m-order-item {
  .review-refund {
    .refund-input {
      .w-input {
        width: 100%;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../../scss/_var.scss';
.btn-option {
  font-size: 12px;
  padding: 0 10px;
  border-radius: 4px;
  width: auto !important;
  height:26px;
  color: #ffffff;
  &.primary {
    background-color: rgba(74,144,226,1);
  }
  &.main {
    background-color:$color-main;
  }
}
.txt-goods {
  color: $color-line-gray;
}
.txt-m {
  color: #313131
}
.bor-b {
  border-bottom: 1px solid #DBDBDB;
  // &:last-child {
  //   // border-bottom: none
  // }
}
// 顶格书写
.td-top {
  vertical-align: text-top;
  padding-top: 2%;
} 
.m-order-item {
  width: 100%;
  font-size: 12px;
  background-color: #ffffff;
}
.order-item {
  margin-bottom: 10px;
}
.m-order-table {
  width: 100%;
}

.order-list {
  border: 1px solid #DBDBDB;
  border-top: none;
  table {
    tbody {
      &:last-child {
        tr {
          &:last-child {
            border-bottom: none
          }
        }
      }
    }
  }
}
.order-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #F2F2F2;
  border: 1px solid #DBDBDB;
  padding: 0 20px 0 8px;
  & >div {
    display: inline-block;
  }
  .check-box {
    display: inline-block;
    margin-right: 10px;
    line-height: 22px;
  }
  .c-h-r {
    margin-left: 40px;
    position: relative;
  }
  .store-name {
    font-weight: bold
  }
  .flag {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-left: 20px;
  }
  .print-btn {
    position: absolute;
    right: 30px;
    top: 5px;
  }
}
.goods-main-img {
  width: 88px;
  height: 88px;
  margin-right: 14px;
  position: relative;
}
.goods-list { 
  padding: 12px 10px;
}
.goods-info {
  height: 90px;
  position: relative;
  .goods-sku {
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    color: #999999;
    bottom: 0;
    & > span {
      line-height: 20px;
    }
  }
}
.goods-del {
  padding: 0 5px;
  text-align: center;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  .number {
    width: 42%;
    display: inline-block;
  }
  .dev-count {
    text-align: center;
    color: #606060;
    margin-top: 10px;
  }
  .goods-count {
    border: 1px solid #DBDBDB;
    padding: 5px 10px;
    margin: 0 20px 0 16px;
  }
}
.cus-ser {
  padding: 0 5px;
  text-align: center;
  border-right: 1px solid #DBDBDB;
}
.buyer {
  padding: 0 5px;
  text-align: center;
  color: #313131;
  border-right: 1px solid #DBDBDB;
}
.options {
  text-align: center;
  border-right: 1px solid #DBDBDB;
  .det {
    color: #2D8EFE;
    text-decoration: underline;
  }
  & >span {
    line-height: 24px;
  }
}
.goods-amount {
  text-align: center;
  padding: 5px;
  border-right: 1px solid #DBDBDB;
  & >span {
    line-height: 24px;
  }
  .amount {
    font-weight: bold;
  }
}
.sale-evaluate {
  padding: 5px;
}
.review-refund {
  margin-left: 30px;
  & > div {
    margin-bottom: 10px;
  }
  .refund-title {
    width: 80px;
    text-align: right;
    display: inline-block;
    vertical-align: top;
  }
  .refund-input {
    display: inline-block;
    width: 280px;
    textarea {
      background-color: transparent
    }
  }
}
// 订单列表
.m-order-lists {
  margin-top: 20px;
}
.pages {
  margin: 30px 0;
}
// 发货弹框
.m-confirm-delivery {
  text-align: center;
  &.dev-info {
    margin-top: 20px;
    & > div {
      display: inline-block;
      .info {
        width: 230px;
      }
    }
  }
  .delivery {
    margin-bottom: 20px;
  }
  .title {
    width: 80px;
    display: inline-block;
    text-align: right;
  }
  .info {
    width: 300px;
    margin-left: 10px;
    display: inline-block;
  }
}
.operate {
  position: relative;

  &.remind {
    background: url('../../../assets/remind.png') right top no-repeat;
  }
}
// 部分发货弹框
.m-devliver-pannel {
  .p-order-list {
    margin-top: 12px;
    table {
      width: 100%;
      tr {
        border: 1px solid $border-gray-light;
        td {
          height: 114px;
          text-align: center;
          &:nth-child(1) {
            width: 26%;
            padding: 10px;
          }
          &:nth-child(2) {
            width: 10%
          }
          &:nth-child(3) {
            width: 12%
          }
          &:nth-child(4) {
            width: 12%
          }
          &:nth-child(5) {
            width: 10%
          }
          &:nth-child(6) {
            width: 22%
          }
        }
      }
    }
    .goods-info {
      .goods-img {
        width: 88px;
        height: 88px;
        margin-right: 14px;
      }
      .goods {
        position: relative;
        text-align: left;
        height: 88px;
        font-size: 12px;
        p {
          font-weight: 500;
        }
        .sku {
          color: $color-dark;
        }
      }
      .update-sku {
        position: absolute;
        bottom: 0;
      }
    }
    .goods-name {
      text-align: left;
    }
    .input-count {
      width: 72px;
      margin: 0 auto
    }
  }
  .m-confirm-delivery {
    text-align: center;
    &.dev-info {
      margin-top: 20px;
      & > div {
        display: inline-block;
        .info {
          width: 230px;
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
    .title {
      width: 80px;
      display: inline-block;
      text-align: right;
    }
  }
}
</style>
